<template>
    <div class="set-makeup-tmpl">
        <div class="panel panel-default">
            <div class="search_box">
                选择妆类: <select v-model="params.cat">
                    <option v-for="cat in cats" v-bind:value="cat.type">{{cat.name}}</option>
                </select>
                <button @click="search()">搜索</button>
            </div>
            <!-- Table -->
            <table class="items-list table table-hover table-bordered">
                <thead>
                <tr>
                    <td>材质ID</td>
                    <td>妆类</td>
                    <td>原始数据</td>
                    <td>自定义数据</td>
                </tr>
                </thead>
                <tbody  >
                    <tr v-for="(item,index) in items.list">
                        <td>
                            <p>{{item.tmpl_id}}</p>
                        </td>
                        <td>
                            <p>{{type2name(item.type)}}</p>
                        </td>
                        <td>
                            <img :src="item.tmpl_img">
                            <p class="tmpl_title">{{item.tmpl_title}}</p>
                        </td>
                        <td>
                            <div class="custom_bd">
                                <div>
                                    <img class="custom_tmpl_img" :src="item.custom_tmpl_img" @click="setImage(item)" v-if="item.custom_tmpl_img">
                                    <div class="glyphicon glyphicon-plus custom_tmpl_img add_img" v-else="" @click="setImage(item)"></div>
                                </div>
                                <div class="custom_tmpl_title">
                                    名称:<input type="text" placeholder="" class="input-one" v-model="item.custom_tmpl_title">
                                    <button class="edit" @click="save(item)">修改</button>
                                </div>
                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import imageSelect from 'admin/js/common/image-select.vue';
    import fn from 'admin/js/common/function.js';

    export default {
        props: [''],
        data() {
            return {
                cats: [
                    {
                        name: '全部',
                        type: ''

                    },
                    {
                        name: '唇部',
                        type: 'KH'

                    },
                    {
                        name: '眼线',
                        type: 'YX'

                    },
                    {
                        name: '眉妆',
                        type: 'MM'

                    }
                    ,
                    {
                        name: '眼影',
                        type: 'YY'

                    },
                    {
                        name: '腮红',
                        type: 'SH'

                    },
                    {
                        name: '睫毛',
                        type: 'JM'

                    }
                ],
                params: {
                    cat: '',
                },
                items: {
                    loading: true,
                    total: 0,
                    list: []
                }
            }
        },
        methods: {
            type2name(type){
                return fn.type2name(type);
            },
            search(){
                this.getMakeupTmpl();
            },
            setImage(item){
                var self = this;
                //这是个动态实时加载的组件
                var imageS = Vue.extend(imageSelect);
                imageS = new imageS;

                imageS.temp = {
                    config: {
                        title: '图片选择',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };

                imageS.item_img = item.pic;

                $(".app").append(imageS.$mount().$el);
                imageS.$on("pic-change", function (item_img) {
                    item.custom_tmpl_img = item_img;
                    //self.save(item);
                });

            },
            save(item){
                var self = this;

                var tmpls = [];
                $.map(item.all_tmpls,function(t,i){
                    if(t.select){
                        tmpls.push(t);
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.saveMakeupTmpl,
                    dataType: 'json',
                    data: {
                        item: JSON.stringify(item)
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                    }
                });
            },
            getMakeupTmpl:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getMakeupTmpl,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.list;
                            self.items.total = response.data.total;
                            self.items.loading = false;
                        }
                    }
                });
            },
        },
        created(){
            var self = this;

            self.getMakeupTmpl();
        },
        components: {
            imageSelect
        }
    }
</script>

<style lang="less">
    .set-makeup-tmpl {
        position: relative;

        .search_box {
            padding: 10px;
            background-color: #f2f2f2;

        }

        .items-list{
            td {
                vertical-align: middle;
            }

            .tmpl_title{
                width: 80px;
                text-align: center;
            }

            .custom_bd {
                display: flex;

                .custom_tmpl_img {
                    cursor: pointer;
                }

                .add_img {
                    vertical-align: middle;
                    text-align: center;
                    border: 1px solid #ddd;
                    width: 80px;
                    height: 80px;
                    line-height: 80px;
                    cursor: pointer;
                }

                .custom_tmpl_title {
                    margin: auto 0;
                    padding-left: 10px;
                }
            }

            img{
                width:80px
            }

            input {
                width:80px;
            }
        }


    }


</style>